<script setup>
import { useGraphStore } from '@/store/modules/graphStore.js'
import X6Editor from '@/views/graph-editor/components/graph-center-panel/x6-editor.vue'
import GraphLeftPanel from '@/views/graph-editor/components/graph-left-panel/graph-left-panel'
import GraphRightPanel from '@/views/graph-editor/components/graph-right-panel/graph-right-panel.vue'
import { Message } from '@arco-design/web-vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import GraphHeader from './components/graph-header/graph-header'

const graphStore = useGraphStore()
const isInit = ref(false)
const route = useRoute()
onMounted(async () => {
  const { id } = route.query
  document.querySelector('#loading-page').style.display = 'none'
  if (!id) {
    Message.error('获取 id 失败')
    return false
  }
  graphStore.$reset()
  await graphStore.getInfo(id)
  isInit.value = true
})
</script>

<template>
  <a-spin :loading="!isInit" tip="加载中..." class="w-full h-full">
    <a-layout class="h-[100vh] w-full overflow-hidden">
      <a-layout-header>
        <graph-header></graph-header>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          :width="248"
          hide-trigger
          class="min-w-[248px] border-r-arco-neutral-3 border-r"
        >
          <GraphLeftPanel></GraphLeftPanel>
        </a-layout-sider>
        <a-layout-content>
          <x6-editor v-if="isInit"></x6-editor>
        </a-layout-content>
        <a-layout-sider
          :width="300"
          class="min-w-[300px] border-l-arco-neutral-3 border-l"
          hide-trigger
        >
          <graph-right-panel></graph-right-panel>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </a-spin>
</template>
